<script setup lang="ts">
import Sortable from 'sortablejs'
import { InjectionI18nTitle } from '@/utils/injectionKeys'
import useFavoritesStore from '@/store/modules/favorites'

defineOptions({
  name: 'Favorites',
})

const route = useRoute()
const router = useRouter()
const favoritesStore = useFavoritesStore()

const generateI18nTitle = inject(InjectionI18nTitle, Function, true)

const favoritesContainerRef = ref()

// eslint-disable-next-line unused-imports/no-unused-vars
let favoritesSortable: Sortable
watch(() => favoritesContainerRef.value, (val) => {
  if (val) {
    favoritesSortable = new Sortable(favoritesContainerRef.value, {
      animation: 200,
      ghostClass: 'ghost',
      draggable: '.item',
      onUpdate: (e) => {
        if (e.newIndex !== undefined && e.oldIndex !== undefined) {
          favoritesStore.sort(e.newIndex, e.oldIndex)
        }
      },
    })
  }
})
</script>

<template>
  <div class="favorites-container">
    <div class="title-bar">
      <div class="title">
        我的收藏夹
      </div>
      <div v-show="favoritesStore.canAdd(route.fullPath)" class="icons">
        <svg-icon v-if="!favoritesStore.isAdd(route.fullPath)" name="mdi:star-plus-outline" title="添加到收藏夹" @click="favoritesStore.add(route)" />
        <svg-icon v-else name="mdi:star-remove" title="从收藏夹删除" @click="favoritesStore.remove(route.fullPath)" />
      </div>
    </div>
    <el-scrollbar v-if="favoritesStore.list.length > 0" max-height="300px">
      <div ref="favoritesContainerRef" class="list">
        <div v-for="item in favoritesStore.list" :key="item.fullPath" :title="generateI18nTitle(item.i18n, item.title)" class="item" @click="router.push(item.fullPath)">
          <svg-icon v-if="item.icon" :name="item.icon" />
          <el-text truncated class="name">
            {{ generateI18nTitle(item.i18n, item.title) }}
          </el-text>
          <svg-icon name="ep:delete" class="delete" @click.stop="favoritesStore.remove(item.fullPath)" />
        </div>
      </div>
    </el-scrollbar>
    <div v-else class="empty">
      <svg-icon name="tabler:mood-empty" />
      <el-text>收藏夹是空的</el-text>
      <el-text v-show="favoritesStore.canAdd(route.fullPath)" class="tips">
        点击右上角
        <svg-icon name="mdi:star-plus-outline" />
        将当前页面添加到收藏夹
      </el-text>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.favorites-container {
  width: 300px;

  .title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 12px;
    margin-bottom: -6px;

    .title {
      font-size: 14px;
      font-weight: bold;
    }

    .icons {
      display: flex;
      align-items: center;

      .icon {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }

  :deep(.el-scrollbar__wrap) {
    width: 100%;
    overscroll-behavior: contain;
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 12px;
    margin-bottom: 6px;

    .item {
      position: relative;
      width: calc(50% - 6px);
      height: 36px;
      padding: 0 8px;
      margin: 5px 0;
      display: flex;
      align-items: center;
      border: 1px solid var(--el-border-color);
      border-radius: 4px;
      background-color: var(--el-bg-color);
      cursor: pointer;
      transition: var(--el-transition-color), var(--el-transition-border);

      &:hover {
        border: 1px solid var(--el-color-primary);
      }

      &.ghost {
        opacity: 0;
      }

      * {
        user-select: none;
      }

      .icon {
        font-size: 18px;
      }

      .name {
        flex: 1;
        margin: 0 16px 0 8px;
        color: var(--el-text-color-primary);
        mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
      }

      .delete {
        position: absolute;
        right: 5px;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        font-size: 14px;
        color: var(--el-text-color-disabled);
        transition: var(--el-transition-color), background-color 0.3s;

        &:hover {
          color: var(--el-text-color-primary);
          background-color: var(--el-fill-color);
        }
      }
    }
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    color: var(--el-text-color-placeholder);

    .icon {
      font-size: 40px;
    }

    .el-text {
      margin-top: 10px;
      display: flex;
      align-items: center;
      color: var(--el-text-color-placeholder);

      &.tips {
        color: var(--el-text-color-disabled);
      }

      .icon {
        margin: 0 4px;
        font-size: 18px;
        color: var(--el-text-color-primary);
      }
    }
  }
}
</style>
